<template>
    <header>
        <div class="l-content">
            <el-button @click="changeMenu()" plain icon="el-icon-menu" size="mini"></el-button>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="item in tags" :index="item.name" :key="item.name" :to="item.path">
                    {{ item.lable }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="r-content">
            <el-dropdown triger="hover" size="mini">
                <span>
                    <img class="user" :src="userImg">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <router-link to="/home">
                            <el-button type="primary" size="small">主页
                            </el-button>
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/login">
                            <el-button type="danger" size="small" @click="removeLocal()">退出
                            </el-button>
                        </router-link>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </header>
</template>

<script>
import { mapState } from "vuex";
export default {
    // 组件名称
    name: 'commonHeader',
    data() {
        return {
            userImg: require('@/assets/logo.png')
        }
    },
    methods: {
        changeMenu() {
            this.$store.commit('collapseMenu')
        },
        removeLocal() {
            console.log('localStorage.clear()');
            localStorage.clear()
        }
    },
    computed: {
        ...mapState({
            tags: state => state.tab.tabList
        })
    }
}
</script> 

<style scoped lang='less'>
header {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: aliceblue;

    .l-content {
        width: auto;
        line-height: 40px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .el-button {
            margin-right: 10px
        }
    }

    .r-content {
        float: right;
        margin-right: 10px;

        .user {
            border-radius: 50%;
            width: 40px;
            height: 40px;
        }
    }

    .el-breadcrumb ::v-deep .el-breadcrumb__inner {
        color: rgb(255, 255, 255) !important;
    }

    .el-breadcrumb ::v-deep .el-breadcrumb__inner:hover {
        color: rgba(69, 122, 235, 0.822) !important;
    }
}
</style>
